<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">
</div>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
    </tr>

    <tr>
    <td>3</td>
    <td>岳不群</td>
    <td>?</td>
    <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
</tr>
</table>
<script>

     //当页面加载完成后执行事件
     document.getElementById("btn_add").onclick = function () {
         //获取添加按钮对象并给其绑定单击事件
         var id = document.getElementById("id").value;
         //获取id文本框的值
         var name = document.getElementById("name").value;
         //获取name文本框的值
         var gender = document.getElementById("gender").value;
         var table = document.getElementsByTagName("table")[0];
         table.innerHTML += "  <tr>\n" + "       " + " <td>"+id+"</td>\n" + "        <td>"+name+"</td>\n" + "        <td>"+gender+"</td>\n" + "        <td><a href=\"java:void(0)\" onclick=\"delTr(this)\">删除</a></td>\n" +
             "    </tr>";

         //获取性别文本框的值
         //      var td_id = document.createElement("td");
         //      //创建id单元格，为了将输入的id存入
         //          var text_id = document.createTextNode(id);
         //          //将id转化为节点
         //            td_id.appendChild(text_id);//将节点添加到单元格中去
         //            var td_name = document.createElement("td");
         //            //创建单元格
         //               var text_name = document.createTextNode(name);
         //               //将输入的name字符串转化为节点
         //                td_name.appendChild(text_name);
         //                //将name节点添加到单元格中去
         //     var td_gender = document.createElement("td");
         //     //闯将gender单元格为将输入gender添加到单元格中去
         //     var text_gender = document.createTextNode(gender);
         //     //将输入的gender字符 串转化为节点
         //     td_gender.appendChild(text_gender);
         //     //将gender节点添加到单元格中
         //       var td_a = document.createElement("td");
         //       //创建一个单元格
         //               var a = document.createElement("a");
         //               //创建一个超链接标签
         //                var text_a = document.createTextNode("删除");
         //                //创建超链接中的文字信息
         //                a.setAttribute("href","javascript:void(0)");
         //                //设置超链接的属性，超链接可以点击但是不跳转
         //                a.setAttribute("onclick","delTr(this)")
         //     //给超链接绑定单击事件，句柄绑定模式，调用方法
         //                 a.appendChild(text_a);
         //                //将文字信息节点添加到超链接标签中去
         //                  td_a.appendChild(a);
         //                  //将超链接添加到单元格中
         //     var tr = document.createElement("tr");
         //     //创建行对象
         //              tr.appendChild(td_id);//将id单元格添加但行中
         //     tr.appendChild(td_name);//将name单元格添加到行中
         //     tr.appendChild(td_gender);//将gender单元格添加到行中
         //     tr.appendChild(td_a)//将超链接添加到行中
         //      var table = document.getElementsByTagName("table")[0];
         //     //获取table表格
         //          table.appendChild(tr);
         //          //将行中添加到表格中
         //
         // }
     }

     function delTr(object) {
         //定义删除元素方法
         var table = object.parentNode.parentNode.parentNode;
         //通过节点的parentNode方法获取table
         var tr = object.parentNode.parentNode;
         //获取行
         table.removeChild(tr);//从表格中删除行
     }




</script>
</body>
</html>